<template>
  <div class="yy-schedule-selector">
    <el-dialog
        v-model="isVisible"
        title="选择出诊科目"
        width="90%"
        :close-on-click-modal="false"
        @close="onCancelDialog"
        :show-close="false"
        class="yy-modal--custom"
    >
      <WidgetTable
          ref="scheduleListTableRef"
          class="yy-flex-table_container"
          :is-loading="table.isLoading"
          :columns="table.columns"
          :data="table.data"
          :formats="table.formats"
          :paging-data="table.paging"
          :options="table.options"
          :selected-row="currentSchedule"
          @current-change="onHandlerCurrentChange"
      ></WidgetTable>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancelDialog">关闭</el-button>
          <el-button type="primary" @click="onSave">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {reactive, defineEmits, defineProps, defineExpose, ref, nextTick} from "vue";
import ClientApi from "@/api/doctor";
import WidgetTable from "@/components/widget/WidgetTable.vue";
import {QueueScheduleModel} from "@/model/QueueScheduleModel";

  const $emit = defineEmits({
    'selectSchedule': (schedule) => schedule
  })
  const isVisible = ref(false)

  const table = reactive<{
    isHide?: boolean,
    isLoading: boolean,
    paging: any,
    options: any,
    columns: any[],
    data: any[],
    formats?: any
  }>({
    isHide: false,
    isLoading: false,
    columns: [
      {
        "field":"clinicHoursName",
        "label":"时段",
        "showable":true,
        "width": 60,
        "fixed": 'left'
      },
      {
        "field":"itemName",
        "label":"科目",
        "showable":true
      },
      {
        "field":"departName",
        "label":"科室",
        "showable":true,
      },
      {
        "field":"categoryName",
        "label":"类别",
        "showable":true
      },
      {
        "field":"awaitCount",
        "label":"候诊",
        "showable":true,
        "fixed": 'right',
        "width": 60,
      },
    ],
    paging: {
      isPaging: false,
    },
    options: {
      isSingleSelect: true,
      highlight: true,
    },
    data: [],
  })

  const props = defineProps({
    emplId: {
      type: String,
      required: true,
      default: null
    },
    scheduleId: {
      type: String,
      required: false
    }
  })

  const currentSchedule = ref()

  const scheduleListTableRef = ref()

  const onShowDialog = () => {
    isVisible.value = true
    table.isHide = false
    listEmplSchedule()
  }

  const listEmplSchedule = () => {
    table.isLoading = true
    ClientApi.listDoctorSchedule(props.emplId).then(data => {
      table.data = [...data] || []
      if (props.scheduleId) {
        nextTick(() => {
          currentSchedule.value = data.find(item => item.id === props.scheduleId)
        })
      }
      table.isLoading = false
    })
  }

  const onHandlerCurrentChange = (current: QueueScheduleModel) => {
    currentSchedule.value = current
  }

  const onSave = () => {
    $emit('selectSchedule', currentSchedule.value)
    onCancelDialog()
  }

  const onCancelDialog = () => {
    if (isVisible.value) {
      setTimeout(() => {
        table.isHide = true
      }, 200)
    }
    isVisible.value = false
  }

  defineExpose({
    onShowDialog
  })

</script>
<style scoped lang="scss">
  .yy-schedule-selector {
  }
</style>
